<template>
	<gracePage :isSwitchPage="true" :customHeader="false">
		<!-- 页面主体插槽 -->
		<view slot="gBody" style="margin-top: -40rpx;">
			<graceHeader background="transparent"></graceHeader>
			<view class="fm10 white-rgba account-part1 boxshadow">
				<view class="grace-nowrap pr" @tap="toReg">
					<image src="../../static/images/default.jpg" class="account-face grace-box-shadow"></image>
					<view class="account-part1-r">
						<view class="account-name">
							<text>学相伴</text>
							<text class="iconfont pl3 pr tp3 fwn icon-vip fz24 grace-yellow"></text>	
							<text class="iconfont icon-svip pr tp3 pl3 fwn fz24 grace-red"></text> 
						</view>
						<view class="account-level fz12">
							<text>等级：Lv6</text>
							<text class="pl5">性别：男</text>
						</view>
						<text class="grace-text-small grace-black fw">#{{famousmsg}}#</text>
					</view>
				</view>
				<view class="account-tags grace-wrap pr">
					<navigator url="../payment/payment" class="account-tag"><text class="iconfont icon-fensi pr3 fz14"></text> 粉丝100</navigator>
					<navigator url="../payment/payment" class="account-tag grace-icons"><text class="iconfont icon-7 pr3 fz14"></text> 关注100</navigator>
					<navigator url="../topics/index" open-type="switchTab"  class="account-tag iconfont">&#xe600; 江湖100</navigator>
					<view class="ksd-sign-box"><text class="iconfont icon-qiandao pr2 pr tp1"></text>签到</view>
				</view>
			</view>
			<view class="fm10 grace-bg-white boxshadow account-part3">
				<view class="grace-grids">
					<navigator class="grace-grids-items grids-border-item grace-relative" open-type="switchTab" url="../topics/index">
						<text class="grace-grids-icon iconfont fz22 grace-black">&#xe699;</text>
						<text class="grace-grids-text">江湖</text>
					</navigator>
					<navigator class="grace-grids-items grids-border-item grace-relative" open-type="switchTab" url="../index/index?tabindex=1">
						<text class="grace-grids-icon iconfont fz28 grace-black">&#xe615;</text>
						<text class="grace-grids-text">课程</text>
					</navigator>
					<navigator class="grace-grids-items grids-border-item grace-relative" url="../msg/msg">
						<text class="grace-grids-icon iconfont fz24 grace-black pr">
							 &#xe618;
							<text class="ksd-icon-dot iconfont grace-red" style="right: 60rpx;top:-20rpx;">&#xe63f;</text>
						</text>
						<text class="grace-grids-text">消息</text>
					</navigator>
					<navigator class="grace-grids-items grids-border-item grace-relative" url="../payment/payment">
						<text class="grace-grids-icon iconfont fz28 grace-black">&#xe621;</text>
						<text class="grace-grids-text">说说</text>
					</navigator>
					<navigator class="grace-grids-items grids-border-item grace-relative" url="../payment/payment">
						<text class="grace-grids-icon iconfont fz28 grace-black">&#xe651;</text>
						<text class="grace-grids-text">收藏</text>
					</navigator>
					<navigator class="grace-grids-items grids-border-item grace-relative" url="../payment/payment">
						<text class="grace-grids-icon iconfont fz28 grace-black">&#xe684;</text>
						<text class="grace-grids-text">稍后在看</text>
					</navigator>
					<navigator class="grace-grids-items grids-border-item grace-relative" url="../payment/payment">
						<text class="grace-grids-icon iconfont fz24 grace-black">&#xe616;</text>
						<text class="grace-grids-text">分享</text>
					</navigator>
				</view>
			</view>
			<view class="fm10 grace-bg-white boxshadow account-part2">
				<navigator class="grace-list-items" url="../payment/payment">
					<text class="grace-list-icon iconfont fz22 pr ftp1 icon-7 grace-black"></text>
					<view class="grace-list-body">
						<view class="grace-list-title">
							<text class="grace-list-title-text">会员权益</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</navigator>
				<navigator class="grace-list-items" url="../payment/payment">
					<text class="grace-list-icon iconfont fz22 pr ftp1 icon-zhangdan grace-black"></text>
					<view class="grace-list-body">
						<view class="grace-list-title">
							<text class="grace-list-title-text">我的账单</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</navigator>
				<navigator class="grace-list-items" url="../payment/payment">
					<text class="grace-list-icon iconfont fz22 pr ftp1 icon-Settingscontroloptions grace-black"></text>
					<view class="grace-list-body">
						<view class="grace-list-title">
							<text class="grace-list-title-text">个人设置</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</navigator>
				<navigator class="grace-list-items" url="../payment/payment">
					<text class="grace-list-icon iconfont fz22 pr ftp1 icon-kefu grace-black"></text>
					<view class="grace-list-body">
						<view class="grace-list-title">
							<text class="grace-list-title-text">联系客服</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</navigator>
				<navigator class="grace-list-items" url="../payment/payment">
					<text class="grace-list-icon iconfont fz22 pr ftp1 icon-19guanyuruanjian grace-black"></text>
					<view class="grace-list-body">
						<view class="grace-list-title">
							<text class="grace-list-title-text">关于我们</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</navigator>
			</view>
			<view class="fm10 grace-bg-white boxshadow account-part2 mb15">
				<view class="grace-list-items" @tap="showDialog2">
					<text class="grace-list-icon iconfont fz22 pr ftp1 icon-tuichu grace-black"></text>
					<view class="grace-list-body">
						<view class="grace-list-title">
							<text class="grace-list-title-text">账号退出</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
			</view>
			
			<graceDialog ref="graceDialog2" :isTitle="false" v-on:closeDialog="closeDialog2">
				<view class="content2" slot="content">
					<text>你确定退出吗？</text>
				</view>
				<view slot="btns" class="grace-space-between">
					<text class="grace-dialog-buttons" @tap="closeDialog2">取消</text>
					<text class="grace-dialog-buttons grace-blue" @tap="confirm2">确定</text>
				</view>
			</graceDialog>

		</view>
	</gracePage>
</template>
<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	import graceNavBar from '../../graceUI/components/graceNavBar.vue';
	import graceDialog from '../../graceUI/components/graceDialog.vue';

	// 演示调用 common.js
	export default {
		data() {
			return {
				currentIndex: 0,
				tabs: ['签到'],
				famousmsg:"永远相信美好的事情即将发生",
				famous:["但行好事，莫问前程",
				        "去更远的地方，见更亮的光",
				        "永远相信美好的事情即将发生",
				        "生活原本沉闷，但跑起来就有风",
				        "我们的征途是星辰大海",
				        "保持热爱、奔赴山海",
				        "须知少年凌云志，曾许人间第一流",
				        "唯有热爱，能抵岁月漫长",
				        "生活明朗，万物可爱，人间值得，未来可期",
				        "即使再小的帆也能远航"]
			}
		},
		onShow() {
			this.loadfanmouse();
		},
		onPullDownRefresh(){
			this.loadfanmouse();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			loadfanmouse(){
				var text = this.famous[Math.floor(Math.random() * this.famous.length)];
				this.famousmsg = text;
			},
			set() {
				console.log("111111111111")
			},
			toReg(){
				uni.navigateTo({
					url: '../reg/reg'
				});
			},
			confirm2 : function(){
				this.closeDialog2();
				uni.showToast({title:"您点击了确认按钮", icon:"none"});
			},
			showDialog2  : function(){this.$refs.graceDialog2.open();},
			closeDialog2 : function(){this.$refs.graceDialog2.hide();},
		},
		components: {
			gracePage,
			graceDialog,
			graceNavBar
		}
	}
</script>
<style>
	page{background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583742114108&di=5952cff6ac68fb5ce67a07b68cd865f6&imgtype=0&src=http%3A%2F%2F09.imgmini.eastday.com%2Fmobile%2F20180213%2F20180213140928_05c7c692018f05cadc6dde6e64d2f4bb_5.jpeg);background-size:100% 350rpx;background-repeat:no-repeat;background-color:#F6F7F8;border-bottom-left-radius:20rpx;border-bottom-right-radius:25rpx;}
	.account-part1{border-radius:16rpx;padding:40rpx 40rpx 30rpx;}
	.account-part2{border-radius:16rpx;padding:8px 36rpx;}
	.account-part3{border-radius:16rpx;padding:4rpx 0;}
	.account-face{width:150rpx;height:150rpx;border-radius:120rpx;background-color:#FFFFFF;flex-shrink:0;}
	.account-part1-r{width:700rpx;margin-left:30rpx;margin-top:20rpx;}
	.account-name{font-size:32rpx;line-height:40rpx;font-weight:600;display:block;}
	.account-level{font-size:32rpx;line-height:40rpx;font-weight:400;display:block;}
	.account-tags{margin-top:35rpx;}
	.account-tag{display:inline-flexbox;background-color:#eee;border-radius:10rpx;margin-right:12rpx;line-height:30rpx;font-size:24rpx;padding:16rpx;color:#333;}
	.grace-grids-items{width:25%;}
	.ksd-sign-box{font-size:12px;color:#FFFFFF;position:absolute;background:#03A9F4;border-radius:30rpx;padding:6rpx 28rpx;bottom:8rpx;right:-12rpx;}
	.content2{padding:50rpx 30rpx; padding-right:80rpx; line-height:50rpx; font-size:26rpx;}
	/* 图片形式 */
	.grace-dialog-buttons{width:700rpx; line-height:88rpx; height:88rpx; display:block; overflow:hidden; text-align:center; font-size:26rpx; color:#999999;}
</style>
